/*
 * http://www.sencha.com/learn/intro-to-layouts/
 */
myApp.views.indexBox = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout:{
        type:'vbox',
        align:'stretch'
    },
    defaults:{
        flex:1
    },
    items:[
        {
            dock:'top',
            style:"background-color: red; color:white;",
            title: 'red',
            html:'red'
        },
        {
            dock:'top',
            style:"background-color: green; color:white;",
            title: 'green',
            html:'green'
        },
        {
            dock:'top',
            style:"background-color: black; color:white;",
            title: 'black',
            html:'black'
        },
    ],
    dockedItems:[
        {
            xtype:'toolbar',
            title:'Index/box',
            items:[
                {
                    text:'Sommaire',
                    handler:function(){
                        Ext.dispatch({
                            controller: "Index",
                            action:'index',
                            animation: { type: 'slide', direction: 'right' }
                        })
                    }
                }
            ]
        }
    ],
    initComponent:function(){
        myApp.helpers.Events.addTimerListenersToView(this,'Index', 'box');
        myApp.views.indexBox.superclass.initComponent.apply(this,arguments);
    }
});
Ext.reg('indexBox', myApp.views.indexBox);